import React from 'react';
import { Chart, Geom, Axis, Tooltip, Legend } from "bizcharts";
import AxCard from '@/components/AxBase/AxCard';
import { AxPanelLineProps } from './data';
import { Col } from 'antd';

/**辅导员面板折线图 */
export const AxPanelLine: React.FC<AxPanelLineProps> = props => {
    const { data = [] } = props;
    const cols = {
        xField: {
            range: [0, 1]
        }
    }

    return (
        <div>
            <Col span={9}>
            <AxCard title='折线统计图' style={{ marginBottom: '20px', paddingLeft: '10px' }}>
                <Chart height={400} data={data} scale={cols} forceFit>
                    <Legend />
                    <Axis name="xField" />
                    <Axis name="yField" label={{ formatter: val => `${val}人` }} />
                    <Tooltip crosshairs={{ type: "y" }} //
                    />
                    <Geom
                        type="line"
                        position="xField*yField"
                        size={2}
                        color={"kinds"}
                        shape={"smooth"}
                    />
                    <Geom
                        type="point"
                        position="xField*yField"
                        size={4}
                        color={"kinds"}
                        shape={"circle"}
                        style={{
                            stroke: '#fff',
                            lineWidth: 1,
                        }}
                    />

                </Chart>
                
            </AxCard>
            </Col>
        </div>
    )
}

